<div id="node_list">
    <div class="box">
    <ul>
        <?php foreach ($this->data['list'] as $node):?>
            <li class="node">
                <div onmouseover="show_edit_button(this);" onmouseout="hide_edit_button(this);">
                    <h1><a href="javascript:;" onclick="show_node_detail(<?php echo $node['id'];?>, this);"><label class="nt_<?php echo $node['type'];?>">[<?php echo $node['type'];?>]</label> <?php echo $node['caption'];?></a></h1>
                    <div><?php echo $node['keywords']; ?></div>
                    <div><a class="des" href="javascript:;" onclick="show_node_detail(<?php echo $node['id'];?>, this);"><?php echo $node['description'];?></a></div>
                    <div class="edit"><a  href="javascript:;" onclick="edit_node_detail(<?php echo $node['id'];?>, this);">Edit</a> | <a href="javascript:;">Delete</a></div></div>
            </li>
        <?php endforeach; ?>
    </ul>
    </div>
</div>

<div id="node_detail" class="iframe">
    <iframe id="node_detail_iframe" onload="adjust_iframe(this);" frameborder="0" src="?m=node&a=edit&type=news&node_id=6&out_type=iframe" width="100%" height="100%"></iframe>
</div>
<div class="clear"></div>
<script type="text/javascript" src="<?php echo tos_cdn_url('js', 'sys');?>/z.js"></script>
<script>
var iframe = z.s('node_detail_iframe');
var node_detail = z.s('node_detail');
var body_width = (window.innerWidth) ? window.innerWidth : document.documentElement.clientWidth;
var body_height = (window.innerHeight) ? window.innerHeight : document.documentElement.clientHeight;
/*
window.onload = function () {
    
    var body_width = (window.innerWidth) ? window.innerWidth : document.documentElement.clientWidth;
    var body_height = (window.innerHeight) ? window.innerHeight : document.documentElement.clientHeight;

    
    //f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
    //node_detail.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + "px";
    //adjust_iframe(iframe);
    //node_detail.style.position = 'fixed';
    //node_detail.style.left = '420px';
    //node_detail.style.top = '50px';
    //node_detail.style.width = (body_width - 450) + 'px';
    //node_detail.style.height = (body_height - 100) + 'px';
};
*/
var selected_node_div = null;
function show_node_detail(node_id, target) {
    select_node(node_id, target.parentNode.parentNode, "?m=node&a=display&out_type=iframe&node_id=" + node_id);
    return false;
    //z.addClass(node_detail, "selected");
}
function edit_node_detail(node_id, target) {
    select_node(node_id, target.parentNode.parentNode, "?m=node&a=edit&out_type=iframe&node_id=" + node_id);
    return false;
}

function select_node(node_id, target, src) {
    if (target != selected_node_div) {
        node_detail.style.top = z.getScrollXY().y + 'px';
        //"?m=node&a=display&out_type=iframe&node_id=" + node_id;

        if (selected_node_div) {
            z.removeClass(selected_node_div, 'selected');
        } 
        selected_node_div = target;
        z.addClass(selected_node_div, 'selected');
    }
    if (src != iframe.src) {
        iframe.src = src;
    }
}

function change_iframe(src) {
    node_detail.style.top = z.getScrollXY().y + 'px';
    iframe.src = src;
}

function adjust_iframe(iframe) {
    iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 50) + "px";
    iframe.style.width = (body_width - 480) + 'px';
}

function show_edit_button(target) {
	target.lastChild.style.display = "block";
}
function hide_edit_button(target) {
    target.lastChild.style.display = 'none';
}

</script>